<template>
  <div class="user" @keyup.enter="login">
      <Logo />
    <div class="text_s1">Welcome back</div>
    <div style="width: 320px;margin: 0 auto">
      <Input  v-model='email' label="email" v-model:rules-content="useEmail">
        <template #placeholder>请输入您的邮箱</template>
      </Input>
      <Input @keyup.enter="login" v-model="password" type="password" v-model:rules-content="usePassword" label="password" style="margin-top: 21px">
        <template #placeholder>请输入您的密码</template>
      </Input>
        <Button class="continue" :disabled="loading" :loading="loading" @click="login">继续</Button>
<!--      <div class="continue" @click="login">继续</div>-->
    </div>
    <div class="tips">
      <span>还没有账户？注册一个吧</span>
      <span @click="signUp">注册</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Input from '@/components/input.vue'
import {Button} from "@/components";
import {SetRules, ruleTem, ruleType} from '@/util'
import {signIn} from '@/api/login'
import {EnumLocalStorageKeys} from '@/constants/EnumLocalStorageKey'
import { ElMessage } from 'element-plus';
import { EnumResCode } from './constants/EnumResCode';
import {Logo} from '@/components'
import {getWallet} from "@/plugins/tokenNum";

const router = useRouter()

let email = ref<string>('')
let password = ref<string>('')
let loading = ref<boolean>(false)
let usePassword = ref<ruleType>(ruleTem)
let useEmail = ref<ruleType>(ruleTem)
const signUp = () => {
  router.push('signUp')
}
//继续 登录
const login = async () => {
  useEmail.value = SetRules('email', email.value);
  usePassword.value = SetRules('password', password.value);
  if (![useEmail.value.isRules, usePassword.value.isRules].every((item: boolean) => !item)) return
  //通过,接下来该发送账号密码到后端,验证账号密码是否正确,正确之后跳转到首页
  let params = {
    "email": email.value,
    "password": password.value
  }
  loading.value = true
  const result  = await signIn(params)

  if (result.isSuccess && result.data) {
    const {data: {accessToken}} = result;
    localStorage.setItem(EnumLocalStorageKeys.AccessToken, accessToken)
    localStorage.setItem(EnumLocalStorageKeys.Email, email.value)
    await getWallet()
    router.push({path:'/'})
  } else {
    if (result.code === EnumResCode.emailFail) {
      useEmail.value = {
        isRules: true,
        rulesText: result.msg
      }
    } else if (result.code === EnumResCode.PasswordFail) {
      usePassword.value = {
        isRules: true,
        rulesText: result.msg
      }
    } else {
    // 登录失败
    ElMessage({
      message: result.msg || '登录失败，请重新登录',
      type: 'error',
      showClose: true,
      duration: 5000
    })
    }

  }
  loading.value = false
}
</script>

<style scoped lang="scss">
.user {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text_s1 {
  width: 320px;
  height: 24px;
  font-size: 32px;
  color: rgb(32, 35, 38);
  font-weight: 700;
  //margin-bottom: 41px;
  margin: 40px auto 41px;
}

.continue {
  background: #10a37f;
  //padding: 4px 16px;
  min-height: 52px;
  line-height: 52px;
  color: #fff;
  margin-top: 21px;
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow .25s;
  font-size: 16px;
  &:hover {
    //background: rgba(26,127,100);
    box-shadow: inset 0 0 0 150px rgba(0,0,0,.1);
  }
}

.tips {
  margin-top: 21px;
  span {
    &:nth-child(1) {
      color: rgba(1, 1, 1, 0.4);
      font-size: 12px;
    }

    &:last-child {
      color: rgba(16, 163, 127, 0.8);;
      font-size: 12px;
      margin-left: 8px;
      cursor: pointer;
    }
  }
}
</style>